<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
	 <%
    	request.setAttribute("group", 100);
    %>
<%@ include file="baselayout/import.jsp" %>
<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="Bjtu Machine Learning">
	<meta name="author" content="Alex">
	<title>标记页面</title>
	<link rel="stylesheet" media="screen" href="${staticPath}/assets/css/other.css">
	<link rel="stylesheet" href="${staticPath}/assets/css/bootstrap.min.css">
	<link rel="stylesheet" href="${staticPath}/assets/css/font-awesome.min.css">
	<link rel="stylesheet" type="text/css" href="${staticPath}/assets/css/da-slider.css" />
	<link rel="stylesheet" href="${staticPath}/assets/css/style.css">
	<link rel="stylesheet" href="${staticPath}/assets/css/main.css">
<style type="text/css">
.navbar-inverse {
    background-color: #222;
    border-color: #080808;
}


.error{
	color:red;
	font-size:15px;
}


</style>

</head>
<body>


<nav class="navbar navbar-inverse navbar-fixed-top">
		<div class="container-fluid">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
					<span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="#">欢迎进入标记页面</a>
			</div>
			<div id="navbar" class="navbar-collapse collapse">
				<ul class="nav navbar-nav navbar-right">
					<li onclick="logout()"><a href="javascript:void(0)">退出</a></li>
					<li onclick="showStatusWorkbench()"><a href="../login.jsp">返回登录页面</a></li>
					<li><a href="../">返回系统首页</a></li>			
				</ul>
			</div>
		</div>
	</nav>


<div class="container-fluid">
	<section class="container">
	<div class="heading">
		<h3></h3>
	</div>
	<div id="main" class="row">
		<div class="col-md-12">
			<blockquote class="blockquote-1">
			<p>请仔细阅读文本，然后根据页面下方的提示进行类标选择</p>
				<small>如果出现页面显示问题请更换当前使用的浏览器；推荐：Safari,Chrome,Firefox</small>
			</blockquote> 
			
			<div id="res">
						<h4>
							ID <input id="val" name="id" ></input> 
							<input id="get" type="button" value="获取"></input>
						</h4>
						<h4>
							ID：<small id='SEQ'>${wechat.id}</small>
						</h4>
						<h4>
							标题：<small id='title'>${wechat.title}</small>
						</h4>
						<h4>
							微信名字：<small id='name'>${wechat.name}</small>
						</h4>
						<h4>
							微信号：<small id='account'>${wechat.account}</small>
						</h4>
						<h4>
							微信简介：<small id='brief'>${wechat.brief}</small>
						</h4>
						<h4 id='content'>
							内容：<small >${wechat.content}</small>
						</h4>
						<h4>
							日期：<small id='date'>${wechat.date}</small>
						</h4>
					</div>
			<p><label>以下为15个给定的主类标</label><label id="exist"></label></p>
			<c:forEach items="${classes}" var="item" varStatus="status">  
				<button id="choice" class="btn btn-default btn-sm" value="${item.id }" type="button">${item.classname}</button>
				<div style="display:none"><input  type="checkbox" name="labelid" value="${item.id }" ><label>${item.classname}</label></div>
			</c:forEach>
		</div>
	</div>
	<div id="subff" class="row">
		<blockquote class="blockquote-1">
			当点击上面的主类标之后，下面将出现子类标，如果没出现，则表示无子类标<br>
			当提交成功之后，将会页面自动显示下一个文本，不需要再通过ID获取。
		</blockquote>
		<div id="subclass" class="col-md-12"></div>
	</div>		
	</section>
	
	<div style="margin-top:10px;margin-bottom:20px" align="center">
	    <p>已为您推荐关键词有：
		    <c:forEach items="${keyWords}" var="item" varStatus="status">
		    ${item}；
			</c:forEach>
		</p>
		<label>请输入2-5个本篇文章的关键词：</label>
		<br>
		<input id="keyword1" size=10>
		<input id="keyword2" size=10>
		<input id="keyword3" style="display:none;" size=10 >
		<input id="keyword4" style="display:none;" size=10 >
		<input id="keyword5" style="display:none;" size=10 >
		<button  onclick ="addKey()" class = "btn btn-primary btn-sm">+</button>	
	</div>
	<div style="margin-top:10px;margin-bottom:10px" align="center">
	<label >请选择确信度(以百分数表示)：</label><br>
	    <select id="confidence"> 
	        <option value="">未选择</option>
            <option value="0.5">50%</option> 
            <option value="0.6">60%</option> 
            <option value="0.7">70%</option> 
            <option value="0.8">80%</option> 
            <option value="0.9">90%</option> 
       </select> 
	</div>	
	<div style="margin-top:10px;margin-bottom:10px" align="center">
		<label style="display:none;">请输入2-5个本篇文章的关键词：</label>
		<h2 class="error" id="errorKeyword"></h2>
	</div>
	
	<h2 class="error" id="errorKeyword"></h2>
	<p class="text-center">
		<input class="btn btn-primary"  id="sub" type = "button" value="提交" ></input>
	<p  id="tip" style="display:none;color:green" class="text-center">操作成功</p>
</div>

</body>

	<script src="${staticPath}/assets/js/modernizr-latest.js"></script>
	<script src="${staticPath}/js/jQuery-1.9.1.js"></script>
	<script src="${staticPath}/js/bootstrap.min.js"></script>

<script type="text/javascript">
    var labelid = 0;
    var labels = new Array();
	//子标签问题
	var allChildLabels = [];
	function myreset(){
		labelid = 0;
		$("#subclass").children().each(function(){
			$(this).hide(600,function(){$(this).remove();});
			
		});
		$("div#main button").each(function(){
			$(this).removeClass("active");
			$(this).next().children(":first").prop("checked",false);
		}); 
		
	}
	function updateSublabels(btn,flag){
		$("#subclass").children().remove();
		var str = "<button type=\"button\" data-classid = 5  class=\"btn btn-default btn-sm\"></button>";
		if(flag){
			var pid = parseInt(btn.val());
			for(sub in allChildLabels){
				if(allChildLabels[sub].parentId==pid){
					newbtn = $(str);
					newbtn.attr("data-classid", allChildLabels[sub]);
					newbtn.html(allChildLabels[sub].classname);
					newbtn.val(allChildLabels[sub].id);
					newbtn.click(function(){
						var has = $(this).hasClass("active");
						if(has){
							$(this).removeClass("active");
						}else{
							$(this).addClass("active");
						}
					});
					$("#subclass").append(newbtn);
				}				
			}
		}else{
		}
	}
	function clickbtn(obj){
		var btn = obj.data;
		var chbox = btn.next().children(":first");
		var result =  btn.hasClass("active");
		$("div#main button").each(function(){
			$(this).removeClass("active");
			$(this).next().children(":first").prop("checked",false);
		}); 
		if(!result){
			btn.addClass("active");
			chbox.prop("checked",true);
			updateSublabels(btn,true);
		}else{
			updateSublabels(btn,false);
		}
	}
	$(document).ready(function(){
		//加载所有的子类去。 
		$.ajax({
			'url':"getAllChildren.do",
			 success: function(data){
			   var l = JSON.parse(data);
			   allChildLabels = [];
			   for(child in l){
				   allChildLabels.push(l[child]);
			   }
             }
		});
		$("div#main button").each(function(){
				$(this).bind("click",$(this),clickbtn)
		});
	   $("div#main input[type=checkbox]").each(function(){
    	   $(this).prop("checked",false);
       });
	   
	 document.getElementById("val").value=getQueryString("wechatid");
	   
		/* var url ='${staticPath}/wechatlab/get.do?id=';
		var btns = "<button type=\"button\" class=\"btn btn-default btn-sm\"></button>"
		$("#get").click(function(a){
			val = $("#val").val();
			parsedUrl = url+val;
			if (!isNaN(val)){
				$.ajax({
					'url':parsedUrl,
					 success: function(data){
					   myreset();
					   list = eval("("+data+")");
					   classes = list[0].wechatclassmaps;
                       $("#SEQ").html(list[0].id);
                       $("#title").html(list[0].title);
                       $("#name").html(list[0].name);
                       $("#account").html(list[0].account);
                       $("#brief").html(list[0].brief);
                       $("#content").html(list[0].content);
                       $("#date").html(list[0].date);
                       labels = list[0].wechatclassmaps;
                       $("#exist").children().remove();
                       labels.forEach(function(x){
                    	    newbtn = $(btns);
                    	    newbtn.html(x.label.classname+"("+x.times+")");
                    	  	$("#exist").append(newbtn);
                       });       
                      }
				});
			}
		}); */
		
		$("#get").click(function(a){
			wechatid = $("#val").val();
			window.location = "gettext.do?wechatid="+wechatid;
		});
		
		var interval = true;
		var timeout = null;
			$("#sub").click(function(b){
			if(interval){
				interval = false;
				timeout = setInterval(function(){
					interval=true;
					clearTimeout(timeout);
				},5000);
				
				if($("#SEQ").html().length==0){
					alert("参数错误!");
					return;
				} 
				params = [];
				updateUrl = '';
				finalurl = '';
				$("input[type=checkbox]").each(function(cb){
					if($(this).prop("checked")){
						params.push($(this).val());
					}			
				});
				var beforeCount = params.length;
				//添加进去子类的分类,没有就没有
				var hasSub = false;
				$("#subclass").children().each(function(){
					hasSub = true;
					if($(this).hasClass("active")){
						params.push($(this).val());
					}
				});
				if(params.length==0){
					alert("请选择分类");
					return ;
				}
				if(hasSub){
					if(params.length == parseInt(beforeCount)){
						alert("请选择子类");
						return;
					}
				}
				
				params.forEach(function(val){
					    labels[labelid] = val;
					    labelid++;
					
				});
				post();
				params = [];
				/* $.ajax({
					'url':finalurl,
					 success: function(data){
						 res = eval('('+data+')');
					     $("#tip").show();
	                       setTimeout(function(){
	                    	   $("#tip").fadeOut();
	                       },2000);
	                 }
				}); */
				/* myreset();
				$("#next").click(); */
			}else{//interval
				alert("您的请求过于频繁");
			}
			});		
		});
	
	function post(){
		var id = $("#SEQ").html();
		var keywords = keyword();
		if(keywords.length != 0){
		    document.getElementById("errorKeyword").innerHTML = "";

		var confidence = eval(document.getElementById("confidence")).value;
		if (confidence > 100 || confidence < 0 || confidence.length == 0
				|| confidence == ""){
			document.getElementById("errorKeyword").innerHTML = "请以正确的方式填写您对分类标注的把握程度";
		}else{
			
		url = "./settextlabel.do";
		var la = new Array();
		var index = -1;
		for(i = 0; i < labels.length; i++){
			if(!isNaN(labels[i])){
				index = index+1;
				la[index] = labels[i];
			}
		}
		console.log(id+"  "+la+ " "+la);
		$.ajax({
			url : url,
			type : "POST",
			dataType : 'json',
			traditional :true,
			data : {
				id : id,
				labels : la,
				keywords : keywords,
				confidence : confidence
			},
			success : function(data) {
				var obj = eval("("+ data+")");//转换后的JSON对象
			    if(obj.code == 200){
			    	window.location = "gettext.do";
				}
				else if(obj.message == "ParamsNULL"){
					alert("标注失败，所需参数有空");
				}
				else if(obj.message == "WechatIdIllegal"){
					alert("标注失败，微信文本id不合法");
				}
				else if(obj.message == "KeyWordsIllegal"){
					alert("标注失败，关键词在不在文本中");
				}
				else if(obj.message == "labelId OR Confidence Illegal"){
					alert("标注失败，类标id不存在或者确信度不合法");
				}
			}
		});
		}
	}}
	
	function keyword(){
		//keyWordOrigin
		var keyword;
		var keyword1 = eval(document.getElementById("keyword1")).value ;
		var keyword2 = eval(document.getElementById("keyword2")).value ;
		var keyword3 = eval(document.getElementById("keyword3")).value ;
		var keyword4 = eval(document.getElementById("keyword4")).value ;
		var keyword5 = eval(document.getElementById("keyword5")).value ;
		var keyword = "" ;
		if(keyword1.length == 0||keyword2.length == 0){
			document.getElementById("errorKeyword").innerHTML = "至少写两个关键词";
		} else{
			keyword = keyword1 + " " + keyword2;
			if(keyword3.length != 0){
				keyword = keyword + " " + keyword3;
			}
			if(keyword4.length != 0){
				keyword = keyword + " " + keyword4;
			}
			if(keyword5.length != 0){
				keyword = keyword + " " + keyword5;
			}
		}
		return keyword;
	}
	
	function addKey(){
		if(document.getElementById("keyword3").style.display == "none"){
			document.getElementById("keyword3").style.display = "inline" ;
		}
		else if(document.getElementById("keyword4").style.display == "none"){
			document.getElementById("keyword4").style.display = "inline" ;
		}
		else if(document.getElementById("keyword5").style.display == "none"){
			document.getElementById("keyword5").style.display = "inline" ;
		}
	}
	
	function getQueryString(name)
	{
	     var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
	     var r = window.location.search.substr(1).match(reg);
	     if(r!=null)return  unescape(r[2]); return null;
	}
	
	function logout(){
		$.ajax({
			url:"logout.do",
			type:"get",
			datatype:"json",
			success: function(data){
			}
		});
	}
	
</script>
</html>